<template>
  <div>
    <div>
      <TopFilter ref="formPanel" :list="topFilterList"  :isSubmitBtn="false" :cols="3"   @onCollapse="collapseHandle" />
      <!-- <el-row :gutter="20">
        <el-col :span="12"> -->
      <FilterTable
        ref="table1"
        :columns="columns1"
        :fetchapi="fetchApi"
        :params="fetchParams"
        :isSelectColumn="false"
        selectionType="single"
        :datakey="'rows'"
        :onSyncTableData="onSyncTableData1"
        :onRowSelectChange="selectChangeHandle1"
        :onColumnsChange="columns => (this.columns = columns)"
      >
        <template slot="controls">
          <!-- <el-button size="small" type="primary" icon="el-icon-delete" :disabled="this.topFilterList.find(x => x.fieldName === 'OWNER_CODE').initialValue == ''" @click="delType">删除</el-button>
              <el-button size="small" type="primary" icon="el-icon-plus" :disabled="this.topFilterList.find(x => x.fieldName === 'OWNER_CODE').initialValue == ''" @click="addType">新增</el-button> -->
          <el-button  size="small"  type="primary"   icon="el-icon-upload2"   @click="importFun">导入</el-button>
        </template>
      </FilterTable>
      <!-- </el-col> -->
      <!-- <el-col :span="12">
          <FilterTable
            ref="table2"
            :columns="columns2"
            :height="300"
            :dataSource="dataSourceSeries"
            :isPagination="false"
            :onSyncTableData="onSyncTableData2"
            :onRowSelectChange="selectChangeHandle2"
            :onColumnsChange="columns => (this.columns = columns)"
          >
            <template slot="controls">
              <el-button size="small" type="primary" icon="el-icon-delete" :disabled="this.topFilterList.find(x => x.fieldName === 'OWNER_CODE').initialValue == ''" @click="delSeries">删除</el-button>
              <el-button size="small" type="primary" icon="el-icon-plus" :disabled="this.topFilterList.find(x => x.fieldName === 'OWNER_CODE').initialValue == ''" @click="addSeries">新增</el-button>
            </template>
          </FilterTable>
        </el-col> -->
      <!-- </el-row> -->
    </div>
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <div style="text-align: center;">
      <!-- <el-button type="primary" icon="el-icon-folder" @click="verification">保 存</el-button> -->
    </div>
    <BaseDialog title="维修类型选择" :visible.sync="visible_Type" destroyOnClose>
      <typeChoice :list="this.typeList" @selectDate="addTypeDate" @close="visible_Type = false"></typeChoice>
    </BaseDialog>
    <BaseDialog title="车系选择" :visible.sync="visible_Series" destroyOnClose>
      <seriesChoice :list="this.seriesList" @selectDate="addSeriesDate" @close="visible_Series = false"></seriesChoice>
    </BaseDialog>
    <BaseDialog :visible.sync="showImport" title="导入" width="800px" destroyOnClose :containerStyle="{ height: 'calc(100% - 120px)', overflow: 'auto', paddingBottom: '60px' }">
      <importModel @close="closeImportModel" />
    </BaseDialog>
  </div>
</template>

<script>
import importModel from './importModel.vue';
import { dictionary } from '@/utils/dictMixin';
import typeChoice from './typeChoice';
import seriesChoice from './seriesChoice';
import { queryOwner, save, findAll, queryDealerType, queryDealerSeries } from '@/api/repair/basicparams/dealerAuthoriztion';

export default {
  name: 'dealerAuthorization',
  components: {
    typeChoice,
    seriesChoice,
    importModel
  },
  mixins: [dictionary],
  data() {
    this.selectedRows = [];
    return {
      topFilterList: this.creatTopFilterList(),
      ownerName: [],
      columns1: this.createTableColumns1(),
      columns2: this.createTableColumns2(),
      onRowList1: [],
      onRowList2: [],
      dataSourceType: [],
      dataSourceSeries: [],
      typeList: [],
      seriesList: [],
      visible_Type: false,
      visible_Series: false,
      fetchApi: queryDealerType,
      fetchParams: { xhrAbort: false },
      showImport: false
    };
  },
  mounted() {
    this.queryOwner();
  },
  methods: {
    creatTopFilterList() {
      return [
        {
          type: 'MULTIPLE_SELECT',
          filterable: true,
          label: '经销商名称',
          fieldName: 'OWNER_CODE',
          placeholder: '请选择...',
          initialValue: '',
          itemList: [],
          change: val => {
            this.linkage(val);
            this.queryDealer(val);
          }
        },
        {
          type: 'INPUT',
          label: '经销商代码',
          fieldName: 'OWNER_NAME',
          hidden: true
        }
      ];
    },
    createTableColumns1() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 70,
          sorter: true,
          render: props => {
            return <span>{props.$index + 1}</span>;
          }
        },
        {
          title: '经销商名称',
          dataIndex: 'OWNER_NAME',
          minWidth: 125,
          sorter: true,
          filter: true,
          filterType: 'input',
          showOverflowTooltip: true
        },
        {
          title: '经销商代码',
          dataIndex: 'OWNER_CODE',
          minWidth: 125,
          sorter: true,
          filter: true,
          filterType: 'input',
          showOverflowTooltip: true
        },
        {
          title: '维修类型代码',
          dataIndex: 'REPAIR_TYPE_CODE',
          minWidth: 140,
          sorter: true,
          filter: true,
          filterType: 'input',
          showOverflowTooltip: true
        },
        {
          title: '维修类型名称',
          dataIndex: 'REPAIR_TYPE_NAME',
          minWidth: 120,
          sorter: true,
          filter: true,
          filterType: 'input',
          showOverflowTooltip: true
        },
        {
          title: '车系代码',
          dataIndex: 'SERIES_CODE',
          minWidth: 120,
          sorter: true,
          filter: true,
          filterType: 'input',
          showOverflowTooltip: true
        },
        {
          title: '车系',
          dataIndex: 'SERIES_NAME',
          minWidth: 110,
          sorter: true,
          filter: true,
          filterType: 'input',
          showOverflowTooltip: true
        },
        {
          title: '是否可以维修',
          dataIndex: 'IS_REPAIRABLE',
          sorter: true,
          filter: true,
          filterType: 'checkbox',
          dictItems:this.createDictList('1004'),
          filterItems: this.createDictList('1004'),
        }
      ];
    },
    createTableColumns2() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 70,
          sorter: true,
          render: props => {
            return <span>{props.$index + 1}</span>;
          }
        },
        {
          title: '经销商名称',
          dataIndex: 'OWNER_NAME',
          minWidth: 125,
          sorter: true,
          filter: true,
          filterType: 'input',
          showOverflowTooltip: true
        },
        {
          title: '经销商代码',
          dataIndex: 'OWNER_CODE',
          minWidth: 125,
          sorter: true,
          filter: true,
          filterType: 'input',
          showOverflowTooltip: true
        },
        {
          title: '车系代码',
          dataIndex: 'SERIES_CODE',
          minWidth: 120,
          sorter: true,
          filter: true,
          filterType: 'input',
          showOverflowTooltip: true
        },
        {
          title: '车系',
          dataIndex: 'SERIES_NAME',
          minWidth: 110,
          sorter: true,
          filter: true,
          filterType: 'input',
          showOverflowTooltip: true
        }
      ];
    },
    importFun() {
      this.showImport = true;
    },
    async linkage(val) {
      // 联动隐藏input框获取经销商名称
      this.ownerName.forEach(x => {
        if (x.value == val) {
          this.topFilterList.find(x => x.fieldName === 'OWNER_NAME').initialValue = x.text;
        }
      });
    },
    async queryDealer(val) {
      console.log(val, '进来了');
      if (val != '') {
        let res1 = await queryDealerType({ OWNER_CODE: val });
        // let res2 = await queryDealerSeries({ OWNER_CODE: val });
        // console.log(res1, res2, '查询结果');
        this.fetchParams = Object.assign({}, { OWNER_CODE: val }, { xhrAbort: false });

        // this.dataSourceType = res1.data;
        // this.dataSourceSeries = res2.data;
      } else {
        this.fetchParams = Object.assign({}, { xhrAbort: false });
        let res1 = await queryDealerType();
        // this.dataSourceType = res1.data;
      }
    },
    async queryOwner() {
      let res = await queryOwner();
      this.ownerName = res.data.records.map(x => ({ value: x.companyCode, text: x.companyNameCn }));
      this.topFilterList.find(x => x.fieldName === 'OWNER_CODE').itemList = this.ownerName;
    },
    async formChangeHandle() {},
    async addType() {
      // 维修管理新增按钮
      this.visible_Type = true;
    },
    async addSeries() {
      // 车系新增按钮
      this.visible_Series = true;
    },
    async addTypeDate(val) {
      for (const obj of val) {
        if (!obj.OWNER_NAME) {
          obj.OWNER_NAME = this.topFilterList.find(x => x.fieldName === 'OWNER_NAME').initialValue;
        }
        obj.OWNER_CODE = this.topFilterList.find(x => x.fieldName === 'OWNER_CODE').initialValue;
      }
      this.$refs.table1.$refs.pageTable.EXECUTE_INSERT(val);
    },
    async addSeriesDate(val) {
      for (const obj of val) {
        if (!obj.OWNER_NAME) {
          obj.OWNER_NAME = this.topFilterList.find(x => x.fieldName === 'OWNER_NAME').initialValue;
        }
        obj.OWNER_CODE = this.topFilterList.find(x => x.fieldName === 'OWNER_CODE').initialValue;
      }
      this.$refs.table2.$refs.pageTable.EXECUTE_INSERT(val);
    },
    async selectChangeHandle1(val) {
      this.onRowList1 = val;
    },
    async selectChangeHandle2(val) {
      this.onRowList2 = val;
    },
    async onSyncTableData1(val) {
      // 维修项目表格所有数据
      this.typeList = val;
    },
    async onSyncTableData2(val) {
      // 车系表格所有数据
      this.seriesList = val;
    },
    async delType() {
      // 删除维修类型
      if (this.onRowList1.length > 0) {
        this.$confirm('是否删除?', '提示', {
          confirmButtonText: '是',
          cancelButtonText: '否',
          type: 'warning'
        })
          .then(() => {
            this.$refs.table1.$refs.pageTable.EXECUTE_DELETE(this.onRowList1);
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          })
          .catch(() => {});
      } else {
        this.$notify.warning({ title: '提示信息', message: '请选择要删除的数据!' });
      }
    },
    closeImportModel() {},
    async delSeries() {
      // 删除车系
      if (this.onRowList2.length > 0) {
        this.$confirm('是否删除?', '提示', {
          confirmButtonText: '是',
          cancelButtonText: '否',
          type: 'warning'
        })
          .then(() => {
            this.$refs.table2.$refs.pageTable.EXECUTE_DELETE(this.onRowList2);
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          })
          .catch(() => {});
      } else {
        this.$notify.warning({ title: '提示信息', message: '请选择要删除的数据!' });
      }
    },
     collapseHandle() {
      this.$nextTick(() => {
        this.$refs.table1.$refs.pageTable.EXECUTE_RESET_HEIGHT();
      });
    },
    async verification() {
      // 保存
      let params = {
        seriesList: this.seriesList,
        typeList: this.typeList
      };
      let res = await save(params);
      if (res.resultCode == 200) {
        this.$notify.success({ title: '提示信息', message: '保存成功!' });
      }
    }
  }
};
</script>

<style lang="less"></style>
